<template>
  <div class="togetherReading">
    <!--<div @click="shareFriend()">111111111111111</div>-->
    <van-notice-bar :text="rule" left-icon="volume-o"/>
    <van-tabs v-model="active" color="#FDC12C" title-active-color="#FDC12C" :line-height="height" swipeable
              @change="tabChange(active)" :lazy-render="false">
      <van-tab v-for="(item,index) in tabs" :key="index" :title="item.cate_name">
        <div class="line"></div>
        <div class="contentMain" id="contentMain">
          <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false"
                       @bottom-status-change="handleBottomChange" @top-status-change="handleTopChange"
                       :bottom-all-loaded="allLoaded" ref="loadmore">
            <div class="li" v-for="(item,index) in content" :key="index" @click="goDetail(item.article_id)">
              <div class="left">
                <div class="name">{{item.title}}</div>
                <div class="tip"><span>{{item.create_time}}</span> <span><img src="@/assets/images/ic_browse.png"
                                                                              alt="">{{item.pv}}</span></div>
              </div>
              <div class="right">
                <img :src="item.img_url" alt="">
              </div>
            </div>
            <div class="loadShow" v-show="allLoaded">暂无更多！</div>
            <div slot="bottom" class="mint-loadmore-bottom" v-show="!allLoaded&&topStatus!=='loading'">
              <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">上拉加载</span>
              <span v-show="bottomStatus === 'loading'">加载中</span>
            </div>
          </mt-loadmore>
        </div>
      </van-tab>
    </van-tabs>


  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/8 0008 16:04.
   */
  import {Indicator, Loadmore} from 'mint-ui';
  import utils from '../../../lib/StringExtend'

  export default {
    mounted() {
      if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId)) && !utils.isNone(this.wechat_id)) {
        this.loadData();
      } else if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId))) {
        setTimeout(() => {
          this.loadData();
        }, 300)
      }
    },
    components: {},
    props: {},
    data() {
      return {
        active: 0,
        height: 2,
        tabs: [],
        rule: '',//规则
        content: [],
        wechatId: utils.getCookie('wechat_id'),
        wechat_id: this.$route.query.wechat_id,//公众号

        bottomStatus: '',
        topStatus: '',
        allLoaded: false,
        page_count: 10,
        page_index: 1,
      }
    },
    computed: {},
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      /*
      * 上拉加载
      * */
      loadBottom() {
        this.page_index++;
        this.handleBottomChange("loading");//上拉时 改变状态码
        this.loadList(this.tabs[this.active].art_cate_id);
      },
      /*
      * 下拉刷新
      * */
      loadTop() {
        this.page_count = 10;
        this.page_index = 1;
        this.content = [];
        this.allLoaded = false;
        this.loadList(this.tabs[this.active].art_cate_id);
      },
      goDetail(id) {
        this.$router.push({
          path: '/togetherReadingDetals',
          query: {id: id}
        });
      },
      tabChange(e) {
        this.page_count = 10;
        this.page_index = 1;
        this.content = [];
        this.allLoaded = false;
        this.loadList(this.tabs[e].art_cate_id);
      },
      //分类
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        this.$axios.articleGetArticlecate(params).then(res => {
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.tabs = [{cate_name: '全部', article_id: ''}];
          this.tabs = this.tabs.concat(res.data.list);
          this.rule = res.data.read_rule;
          this.loadList(this.tabs[0].art_cate_id);
        })
      },
      //列表
      loadList(id) {
        Indicator.open('加载中...');
        let params = {
          art_cate_id: id,
          open_id: utils.getCookie('open_id_' + this.wechatId),
          page_count: this.page_count,
          page_index: this.page_index,
        };
        this.$axios.articleGetArticlelist(params).then(res => {
          Indicator.close();
          this.$refs.loadmore[this.active].onTopLoaded();
          this.$refs.loadmore[this.active].onBottomLoaded();
          this.allLoaded = false;
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          res.data.forEach(item => {
            this.content.push(item);
          });
          if (res.data.length < this.page_count) {
            this.allLoaded = true;// 若数据已全部获取完毕
          }
          this.$nextTick(() => {
            if (this.page_index === 1)
              document.getElementById('contentMain').scrollTop = 0
          })
        })
      },
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .togetherReading {
    width: 100%;
    height: 100%;
    background: white;
    overflow: hidden;
    .line {
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }
    .van-tabs__content,.van-tabs, .van-tabs--line{
      height: calc(100% - 40px - 44px);
    }
    /*下拉刷新*/

    .van-pull-refresh, .van-pull-refresh__track {
      height: calc(100% - 0.7rem);
    }

    .contentMain {
      padding: 0 0.3rem;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: auto;
      top: calc(0.12rem + 44px);

      .li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #EFEFEF;
        padding: 0.2rem 0;

        .left {
          width: 4rem;
          font-size: 0.3rem;
          color: #333333;
          text-align: left;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .tip {
            display: flex;
            flex-direction: row;
            align-items: center;
          }

          .name {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            -webkit-line-clamp: 2;
          }

          span {
            font-size: 0.22rem;
            color: #CECFD3;
            margin-right: 0.6rem;
            display: flex;
            flex-direction: row;
            align-items: center;

            img {
              width: 0.28rem;
              height: 0.2rem;
              display: block;
              margin: auto 0.1rem auto 0;
            }
          }
        }

        .right {
          width: 2.1rem;
          height: 1.4rem;
          border-radius: 0.06rem;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 100%;
            height: auto;
            border-radius: 0.06rem;
          }
        }
      }
    }
  }

</style>
